<template>
  <view class="broken-detail">
    <!-- 详情内容 -->
    <view class="detail-content">
      <!-- 基本信息 -->
      <view class="info-card">
        <view class="store-title">{{detail.storeName||'-'}}</view>
        <view class="info-row">
          <view class="label">柜机序列号</view>
          <view class="value">{{ detail.serialNumber }}</view>
        </view>
        <view class="info-row">
          <view class="label">联系人</view>
          <view class="value">{{ detail.contact||'-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">联系电话</view>
          <view class="value">{{ detail.contactNumber ||'-'}}</view>
        </view>
        <view class="info-row">
          <view class="label">问题描述</view>
          <view class="value">{{ detail.faultDescribe||'-' }}</view>
        </view>
        <view class="info-row" style="border-bottom: 1px solid #f5f5f5;padding-bottom: 26rpx;">
          <view class="label">故障图片</view>
          <view class="value">
            <view class="image-list">
              <image v-for="(img, index) in detail.images" :key="index" :src="config.beaeUrl + img" mode="aspectFill"
                @click="previewImage(index)" />
            </view>
          </view>
        </view>
        <view class="info-row">
          <view class="label">维护编号</view>
          <view class="value">{{ detail.id ||'-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">状态</view>
          <view class="value">{{ detail.status == 0 ? '待处理' : '已处理' }}</view>
        </view>
        <view class="info-row">
          <view class="label">提交时间</view>
          <view class="value">{{ detail.createTime||'-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">工程师反馈</view>
          <view class="value">{{ detail.feedback ||'-'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { getbrokenDetail } from '@/api/broken'
  import { onLoad } from '@dcloudio/uni-app'
  import config from '@/config/public.js'

  const detail = ref({})
  // 详情数据
  onLoad((options) => {
    getDetail(options.id)
  })

  // 预览图片
  const previewImage = (index) => {
    const images = detail.value.images.map(item => config.beaeUrl + item)
    uni.previewImage({
      current: index,
      urls: images
    })
  }
  // 获取详情
  const getDetail = (id) => {

    getbrokenDetail(id).then(res => {
      if (res.code == 200) {
        detail.value = res.data
        detail.value.images = res.data.image.split(',')
        detail.value.serialNumber = uni.getStorageSync('machineInfo').serialNumber || '-'
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  }

  // 返回上一页
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .broken-detail {
    min-height: 100vh;
    background: #f5f5f5;

    .detail-content {
      padding: 20rpx;

      .info-card {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;

        .store-title {
          font-size: 38rpx;
          color: #333;
          background: #fff;
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #f5f5f5;
        }

        .info-row {
          display: flex;
          padding-bottom: 6rpx;
          padding-top: 22rpx;
          align-items: flex-start;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            width: 170rpx;
            font-size: 28rpx;
            color: #6B7280;
            flex-shrink: 0;
          }

          .value {
            flex: 1;
            font-size: 28rpx;
            color: #3D3D3D;
            text-align: left;
            word-break: break-all;

            .image-list {
              display: flex;
              flex-wrap: wrap;
              gap: 10rpx;
              margin-top: 10rpx;


              image {
                border: 1rpx solid #f5f5f5;
                border-radius: 16rpx;
                width: 106rpx;
                height: 106rpx;
                border-radius: 8rpx;
              }
            }
          }
        }
      }
    }
  }
</style>